<template>
	<!-- 配送至 -->
	<u-popup :show="show" mode="bottom" :closeable='true' round='20' @close="closeFn">
		<view class="dispatching">
			<view class="dispatching-top">
				<view class="title">
					请选择收货地址
				</view>
				<view class="add" @click="skipAddress()">
					+ 添加收货地址
				</view>

			</view>
			<scroll-view scroll-y="true" class="dispatching-main" show-scrollbar='true'>
				<view class="dispatching-main-box dis_sb" v-for="(item,i) in addressList" :key='i'
					@click="addressSelect(item.id)">
					<view class="dispatching-main-box-left">
						<image v-if="item.defaultStatus==0" class="img1" src="/static/tabbar/opt.png" mode="">
						</image>
						<image v-else class="img2" src="/static/tabbar/opt-no.png" mode=""></image>
					</view>
					<view class="dispatching-main-box-c">
						<view class="name">
							<text>{{item.userName}}</text>
							{{item.phone}}
						</view>
						<view class="addres">
							{{item.province+item.area+item.city+item.address}}
						</view>

					</view>
					<view class="dispatching-main-box-right" @click.stop="skipAddress(item)">
						编辑
					</view>
				</view>
			</scroll-view>
			<view class="dispatching-footer">
				<view class="" @click="addressConfirm">
					确定
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				addressShow: false,
				addressList: []
			}
		},
		created() {
			// this.getAddressListFn()
		},
		onShow() {
			
		},
		watch: {
			show: {
				handler(nv, ov) {
					console.log("show::::", nv)
					if (nv) {
						this.getAddressListFn()	
					}
				}
			}
		},
		methods: {
			// 获取地址列表
			// async getAddressListFn() {
			// 	const {
			// 		data: {
			// 			data
			// 		}
			// 	} = await this.$u.api.getAddressList()
			// 	console.log('这是地址列表', data);
			// 	this.addressList = data
			// 	if(data.length>0){
			// 		this.addressConfirm()
			// 	}
			// },
			//获取地址
			getAddressListFn() {
				this.$api.addressListY({}).then(res => {
					// console.log(res, '地址列表');
					this.addressList = res.data
				})
			},
			//选择地址
			addressSelect(i) {
				console.log(i);
				this.addressList = this.addressList.map((item, v) => {
					if (i == item.id) {
						item.defaultStatus = 0
					} else {
						item.defaultStatus = 1
					}
					return item
				})
			},
			// 确定地址选择
			addressConfirm() {
				this.addressInfo = this.addressList.filter(item => item.defaultStatus == 0)
				console.log('this.addressInfo', this.addressInfo);
				this.$emit('confirm', this.addressInfo)
				this.$emit('close')
			},
			// 跳转地址
			skipAddress(item) {
				console.log('item', item);
				this.addressShow = false
				if (item) {
					uni.navigateTo({
						url: '/pages/my/pages/editAddress?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/pages/address'
					})
				}
			},
			// 关闭方法
			closeFn() {
				this.$emit('close')
				console.log('关闭');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dispatching {
		// height: 1120rpx;
		padding: 40rpx 30rpx 120rpx;
		position: relative;

		.dispatching-top {
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				color: #1A1A1A;
				font-size: 36rpx;
				font-weight: 700;
			}

			.add {
				width: 690rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				margin-top: 40rpx;
				background: #FFFFFF;
				border: 1rpx solid #E1E3E6;
				border-radius: 10rpx;
				color: #323233;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.dispatching-main {
			overflow: hidden;
			overflow-y: scroll;
			height: 500rpx;

			.dispatching-main-box {
				padding: 30rpx 0;
				border-bottom: 1rpx solid #F0F2F5;

				.dispatching-main-box-left {
					.img1 {
						width: 36rpx;
						height: 36rpx;
						flex: none;
					}

					.img2 {
						width: 36rpx;
						height: 36rpx;
						flex: none;
					}
				}

				.dispatching-main-box-c {
					width: 550rpx;

					.name {
						color: #323233;
						font-size: 24rpx;
						font-weight: 500;

						text {
							color: #19191A;
							font-size: 28rpx;
							font-weight: 700;
							margin-right: 30rpx;
						}
					}

					.addres {
						color: #323233;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 10rpx;
					}
				}

				.dispatching-main-box-right {
					color: #2AD03D;
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}

		.dispatching-footer {
			// height: 168rpx;
			padding-top: 20rpx;
			background: #fff;
			position: absolute;
			bottom: 0rpx;
			left: 30rpx;

			view {
				width: 686rpx;
				height: 96rpx;
				background: linear-gradient(135deg, #2AD03D 0%, #00B815 100%);
				border-radius: 16rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 94rpx;
			}
		}


	}
</style>